<template>
	<div class="details">
		<div class="top">
			<div>{{detail.name}}</div>
		</div>
		<p class="content" v-for="(item,i) in detail.list" :key="i">
			<span>{{item.title}}</span>
			<span>{{item.author}}</span>
		</p>

	</div>
</template>

<script>
	export default {
		name: 'detail',
		props: {
			detail: {
				type: Object,
				default: null
			}
		}

	}
</script>

<style scoped>
	.details {
		margin: 20px 0;
		width: 450px;
		/* height: 500px; */
		background-color: white;
	}

	.details .top {
		width: 450px;
		height: 40px;
		background-color: #FAFBFC;
		position: relative;
	}

	.top>div {
		text-align: center;
		position: absolute;
		width: 120px;
		line-height: 60px;
		top: -10px;
		left: 20px;
		background-color: white;
		box-shadow: 0 0 1px 1px rgb(250, 250, 250);
		z-index: 10;
		font-size: 20px;
		color: #31475E;
		font-weight: 400;
	}
	.details>.content{
		display: flex;
		justify-content: space-between;
		color: #6A7C92;
		font-size: 14px;
	}
</style>
